@charset "utf-8";

@import "reset";
@import "common";

@function r($px) {
  @return $px/50px * 1rem;
}

.web {
  section {
    .kv {
      .dt {
        width: r(640px);
        height: r(357px);
        overflow: hidden;
        position: relative;
        img {
          width: 100%;
        }
        .mask {
          width: r(640px);
          height: r(104px);
          background-color: rgba(0, 0, 0, 0.3);
          position: absolute;
          bottom: 0;
          font-size: 0;
          p {
            width: r(560px);
            height: r(28px);
            font-size: r(26px);
            line-height: r(28px);
            color: white;
            margin: r(20px) r(32px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          span {
            font-size: r(18px);
            color: white;
            margin: 0 r(24px);
            i {
              font-size: r(18px);
              color: white;
            }
          }
          #dataa {
            font-size: r(24px);
            text-align: right;
            margin-top: r(-8px);
          }
        }
      }
      .page {
        ul {
          font-size: r(16px);
          position: absolute;
          top: r(330px);
          left: 50%;
          transform: translateX(-50%);
          li {
            border: r(6px) solid #cdbeb2;
            border-radius: 50%;
            margin: 0 r(6px);
            &.active {
              border-color: #b60005;
            }
          }
        }
      }
    }
    .central {
      .curriculum {
        width: r(640px);
        height: r(334px);
        background: #ffffff;
        overflow: hidden;
        .cjk {
          width: r(582px);
          height: r(118px);
          margin: r(20px) auto;
          .cjk_left {
            width: r(324px);
            height: r(118px);
            font-size: 0;
            vertical-align: middle;
            p {
              font-size: r(24px);
              color: #323232;
              margin-bottom: r(30px);
            }
            span {
              font-size: r(20px);
              color: #c5c5c5;
              i {
                font-size: r(18px);
              }
            }
          }
          .cjk_right {
            width: r(210px);
            height: r(118px);
            img {
              width: 100%;
            }
          }
        }
        .xian {
          width: r(582px);
          border-top: 1px solid #e2e2e2;
          margin: 0 auto;
        }
      }
      .xian_kon {
        width: r(640px);
        height: r(25px);
      }
      .czg {
        width: r(640px);
        height: r(266px);
        background: white;
        overflow: hidden;
        p {
          width: r(582px);
          font-size: r(26px);
          margin: r(30px) auto 0;
        }
        .san_img {
          width: r(582px);
          margin: 0 auto;
          div {
            width: r(184px);
            height: r(124px);
            overflow: hidden;
            margin: 0 auto;
            padding: r(16px) 0;
            img {
              width: 100%;
            }
          }
        }
        .czg_bottom {
          width: r(582px);
          margin: 0 auto;
          font-size: 0;
          .tx {
            display: inline-block;
            width: r(28px);
            height: r(28px);
            border-radius: 50%;
            overflow: hidden;
            vertical-align: middle;
            img {
              width: 100%;
              height: 100%;
            }
          }
          span {
            font-size: r(20px);
            color: #c5c5c5;
            margin: 0 r(9px);
            vertical-align: middle;
            i {
              font-size: r(20px);
              margin: 0 r(6px);
            }
          }
        }
      }
    }
    .more {
      width: r(640px);
      background: white;
      p {
        width: r(582px);
        border-top: 1px solid #e0e0e0;
        margin: 0 auto;
        font-size: r(22px);
        text-align: center;
        padding: r(20px) 0;
        color: #bbbbbb;
      }
    }
  }
  .search_web {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto; //内容超出可视宽高，使它拥有滚动条
    z-index: 1;
    background: #f1f1f1;
    transition: left 0.3s;
    .search {
      width: r(640px);
      height: r(88px);
      background: #1d1d1d;
      .cha {
        display: inline-block;
        width: r(50px);
        height: r(50px);
        border-radius: r(25px);
        background: #b60005;
        font-size: 0;
        text-align: center;
        line-height: r(50px);
        margin: 0 r(14px);
        i {
          font-size: r(40px);
          color: white;
        }
      }
      div {
        display: inline-block;
        width: r(506px);
        height: r(50px);
        border: r(1px) solid white;
        border-radius: r(25px);
        line-height: r(50px);
        vertical-align: middle;
        padding: r(0px) r(14px);
        i {
          color: white;
          vertical-align: top;
        }
        input[type="text"] {
          width: r(440px);
          height: r(50px);
          vertical-align: top;
          border: 0 solid red;
          background: transparent;
          color: white;
          outline-style: none; //边框轮廓
        }
      }
    }
    .hotbot {
      width: r(582px);
      margin: r(32px) r(30px);
      p {
        font-size: r(26px);
      }
      span {
        font-size: r(28px);
        color: #8b8b8b;
        padding: r(10px) r(18px);
        border: 1px solid #e4e4e4;
        background: white;
      }
    }
    .exhibition {
      width: r(582px);
      margin: r(32px) r(30px);
      position: absolute;
      top: r(92px);
      left: 0;
      transform: scale(0);
      transition: all 0.6s;
      .gimcvs {
        width: 92%;
        height: r(250px);
        background: white;
        overflow: hidden;
        padding: 0 r(18px);
        font-size: 0;
        margin-bottom: r(32px);
        .yic {
          font-size: r(26px);
          text-align: center;
          margin: r(18px) 0;
        }
        .xianxi {
          font-size: r(22px);
          color: #898989;
          text-align: justify;
        }
        span {
          display: inline-block;
          font-size: r(18px);
          color: #898989;
          margin: r(16px) 0;
        }
        .shij {
          margin-left: r(16px);
        }
      }
    }
    #exhibition_checkbox {
      display: none;
      &:checked + .exhibition {
        transform: scale(1);
      }
    }
  }
  #search_web_contral {
    display: none;
    &:checked + .search_web {
      left: 0%;
    }
  }
  .frmlogin {
    position: absolute;
    top: 0;
    left: 200%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 1;
    background: #222222fd;
    transition: left 0.4s;
    padding-top: r(152px);
    .frmlogin_logo {
      width: r(162px);
      height: r(136px);
      overflow: hidden;
      margin: r(40px) auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    form {
      text-align: center;
      .account {
        width: r(492px);
        height: r(52px);
        margin: r(8px) auto;
        background: #3d3d3d;
        line-height: r(52px);
        overflow: hidden;
        .account_left {
          display: inline-block;
          width: r(60px);
          height: 100%;
          background: #303030;
          text-align: center;
          i {
            font-size: r(30px);
            color: #cccccc;
            line-height: 100%;
            vertical-align: middle;
          }
        }
        input[type="text"] {
          width: r(350px);
          height: 100%;
          outline-style: none;
          vertical-align: middle;
          border: none;
          background: transparent;
          color: white;
          margin: 0 r(30px);
          &::placeholder {
            color: #cdcdcd;
            font-size: r(24px);
          }
        }
      }
      .wangji {
        width: r(492px);
        height: r(52px);
        text-align: right;
        color: #ffffff;
        margin: 0 auto;
        line-height: r(40px);
        span {
          display: inline-block;
          width: r(22px);
          height: r(22px);
          text-align: center;
          border: 1px solid #ffffff;
          border-radius: 50%;
          font-size: 0;
          line-height: r(20px);
          vertical-align: middle;
          i {
            font-size: r(20px);
          }
        }
        p {
          display: inline-block;
          a {
            font-size: r(24px);
            color: #ffffff;
            vertical-align: middle;
          }
        }
      }
      input {
        width: r(492px);
        height: r(52px);
        margin: 0 auto;
        background: #b60005;
        color: white;
        border: r(1px) solid #b60005;
      }
      input[type="button"] {
        background: #303030;
      }
    }
  }
  #frmlogin_web_control {
    display: none;
    &:checked + .frmlogin {
      left: 0;
    }
  }
  .person {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #222222;
    transition: left .6s;
    .search {
      width: r(625px);
      height: r(88px);
      background: #1d1d1d;
      margin: 0 auto;
      border-bottom: r(1px) solid #484848;
      .cha {
        display: inline-block;
        width: r(50px);
        height: r(50px);
        border-radius: r(25px);
        background: #b60005;
        font-size: 0;
        text-align: center;
        line-height: r(50px);
        margin: 0 r(10px);
        i {
          font-size: r(40px);
          color: white;
        }
      }
      div {
        display: inline-block;
        width: r(506px);
        height: r(50px);
        border: r(1px) solid white;
        border-radius: r(25px);
        line-height: r(50px);
        vertical-align: middle;
        padding: r(0px) r(14px);
        i {
          color: white;
          vertical-align: top;
        }
        input[type="text"] {
          width: r(440px);
          height: r(50px);
          vertical-align: top;
          border: 0 solid red;
          background: transparent;
          color: white;
          outline-style: none; //边框轮廓
        }
      }
    }
    .person_cxm {
      width: r(640px);
      height: r(360px);
      .via {
        width: r(134px);
        height: r(134px);
        border-radius: 50%;
        overflow: hidden;
        margin: r(34px) auto r(20px);
        img {
          width: 100%;
        }
      }
      .my_center {
        color: white;
        font-size: r(34px);
        text-align: center;
        margin-bottom: r(10px);
        a {
          border: r(1px) solid white;
          color: white;
          margin-left: r(10px);
          padding: 0 r(4px);
          font-size: r(24px);
        }
      }
      .xinxinxin {
        text-align: center;
        font-size: 0;
        i {
          font-size: r(32px);
          color: #eeca02;
          margin: 0 r(6px);
        }
      }
      .fan {
        width: 100%;
        height: r(26px);
        line-height: r(26px);
        text-align: center;
        p {
          display: inline-block;
          font-size: r(23px);
          color: white;
          vertical-align: middle;

          span {
            color: #b60005;
            vertical-align: middle;
            margin: 0 r(9px);
          }
        }
        .pxian {
          border-right: r(1px) solid #a1a1a1;
        }
      }
      .tabs {
        text-align: center;
        input[type="radio"] {
          display: none;
        }
        label {
          display: inline-block;
          width: r(218px);
          height: r(50px);
          line-height: r(50px);
          border-radius: r(25px);
          color: white;
          font-size: r(23px);
          background: #cdcdcd;
          text-align: center;
        }
        .xianxx {
          width: r(640px);
          height: r(24px);
          margin: r(20px) 0;
          background: #303030;
        }
        .wdsc_web {
          display: none;
          .gime {
            width: r(578px);
            height: r(72px);
            line-height: r(72px);
            margin: 0 auto;
            border-bottom: r(2px) solid #2d2d2d;
            p {
              display: inline-block;
              font-size: r(23px);
              text-align: left;
              color: #7f7f7f;
            }
            label {
              display: inline-block;
              background: #222222;
              margin-left: r(280px);
              i {
                font-size: r(26px);
                color: #7f7f7f;
                transform: rotate(270deg);
              }
            }
          }
          .ul_lieb {
            display: none;
            ul {
              li {
                font-size: r(22px);
                width: r(430px);
                height: r(88px);
                color: #cccccc;
                line-height: r(88px);
                margin: 0 auto;
                border-top: r(1px) solid #2d2d2d;
              }
            }
          }
          #gime_web {
            display: none;
          }
          #gime_web:checked ~ .gime > label > i {
            transform: rotate(0deg);
          }
          #gime_web:checked ~ .ul_lieb {
            display: block;
          }
          #gime_web2 {
            display: none;
          }
          #gime_web2:checked ~ .gime > label > i {
            transform: rotate(0deg);
          }
          #gime_web2:checked ~ .ul_lieb {
            display: block;
          }
        }
        .wdfb_web {
          display: none;
        }
        #sc:checked ~ .wdsc_web {
          display: block;
        }
        #sc:checked ~ .wdsc {
          background: #b60005;
        }
        #fb:checked ~ .wdfb_web {
          display: block;
        }
        #fb:checked ~ .wdfb {
          background: #b60005;
        }
      }
    }
    .labell2 {
      display: inline-block;
      width: r(170px);
      height: r(50px);
      color: white;
      background: #b60005;
      text-align: center;
      line-height: r(50px);
      border-radius: r(25px);
      font-size: r(22px);
      position: absolute;
      top: 80%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  #person_web_control{
    display: none;
    &:checked + .person{
      left: 0%;
    }
  }
}
